import { IForm, IFormBusiness } from '@/modules/dao/BusinessDao';
import { IBusinessStatus } from '@/modules/interface';
import useSyncState from '@/views/hooks/useSyncState';
import styled from '@emotion/styled';
import { Button, Cascader } from 'antd';
import { t } from 'i18next';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import FormItem from './FormItem';

interface Option {
	value: string;
	label: string;
	children?: Option[];
}

const CascaderContainer = styled.div`
	width: 100%;
	height: calc(100% - 50px);
	.ant-select {
		width: 100%;
	}
	.ant-cascader-menu-item-content {
		overflow: hidden;
		font-weight: normal;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0 10px;
		max-width: 200px;
	}
	.ant-cascader-menu-item-active {
		background-color: rgba(0, 0, 0, 0.2);
	}
	.ant-cascader-menu-item-active:hover {
		background-color: rgba(0, 0, 0, 0.2);
	}
`;

interface SelectOption {
	id: string;
	value: string;
	label: string;
	name: string;
	clientId: string;
	status: IBusinessStatus;
	children: IForm[];
}

interface CascaderSelect {
	list: SelectOption[];
	clientId: string;
}

const FormButton = styled(Button)`
	width: 72px;
	height: 32px;
	background: #f3f3f3;
	border-radius: 4px;
	border: 1px solid #eaeaea;
	margin-top: 12px;
	span {
		font-size: 12px;
		color: #c9c9c9;
	}
`;

const TipsView = styled.span`
	color: #c9c9c9;
`;

const CascaderSelect = (props: CascaderSelect) => {
	const { list = [], clientId = '' } = props;

	const [formStatus, setFormStatus] = useState<IBusinessStatus>(IBusinessStatus.IDLE);

	useEffect(() => {
		setFormStatus(IBusinessStatus.IDLE);
		setSelectedForm(null);
		setValue(null);
	}, [list, clientId]);

	const [selectedForm, setSelectedForm] = useSyncState<{ followId: string; formId: string; formTemplate: string; formName: string; title: string; detailId: number | string } | null>(null);

	const [value, setValue] = useState<any>(null);

	const onChange = (value: string[] | any[]) => {
		if (!value) {
			setSelectedForm(null);
			setFormStatus(IBusinessStatus.IDLE);
		} else {
			if (value[0]) {
				const form = list.find(item => item.id === value[0]);
				const children = form?.children.find(item => item.detailId === value[1] && !item.disabled) || null;
				setSelectedForm(children);
				setFormStatus(form?.status || IBusinessStatus.IDLE);
			}
		}
		setValue(value);
		console.log('List:', list, value);
	};

	const displayRender = (label: any, selectedOptions: any) => {
		console.log(label, selectedOptions);

		if (value && selectedOptions.filter((item: any) => item != null && item !== undefined).length > 0) {
			return <>{label.join('/')}</>;
		}
		return <TipsView>{t('please-select-form-view')}</TipsView>;
	};

	const renderForm = useMemo(() => {
		console.log('selectedForm():', selectedForm());

		if (selectedForm()) {
			return <FormItem status={formStatus} detailId={selectedForm()!.detailId} title={selectedForm()!.title} id={selectedForm()!.formId} template={selectedForm()!.formTemplate} />;
		}
	}, [selectedForm(), formStatus]);

	const renderSelect = useMemo(() => {
		return (
			<Cascader
				displayRender={displayRender}
				getPopupContainer={triggerNode => {
					return triggerNode.parentNode;
				}}
				defaultValue={[]}
				placeholder={t('please-select-form-view')}
				options={list}
				onChange={onChange}
				changeOnSelect={true}
			/>
		);
	}, [clientId, list, value]);

	const getFormStatus = () => {
		switch (formStatus) {
			case IBusinessStatus.DONE:
				return t('submitted');
			case IBusinessStatus.CANCEL:
				return t('terminated');
			case IBusinessStatus.REJECTED:
				return t('cancelled');
			default:
				break;
		}
	};

	return (
		<CascaderContainer>
			{renderSelect}
			<FormButton disabled>{getFormStatus()}</FormButton>
			{renderForm}
		</CascaderContainer>
	);
};

export default CascaderSelect;
